<template>
    <div style="font-size: 16px;font-weight: 600;"><el-radio></el-radio>新建导入任务</div>
    <!-- 基本信息 -->
    <div class="main">
        <div class="main-one">
            <el-button type="primary" circle style="width:30px;height: 30px;"></el-button>
            <span>1</span>
            <p>基本信息</p>
        </div>
        <div class="hr1"></div>
        <div class="main-two">
            <el-button type="primary" circle style="width:30px;height: 30px;"></el-button>
            <span>2</span>
            <p>设置对应关系</p>
        </div>
        <div class="hr2"></div>
        <div class="main-three">
            <el-button type="info" circle style="width:30px;height: 30px;"></el-button>
            <span>3</span>
            <p>完成</p>
        </div>
    </div>
    <!--选择已有关系  -->
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="center" style="margin-top: 50px;">
        <el-row>
            <el-col :span="6">
                <el-form-item label="请选择已有关系">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-form-item>
                <el-button type="primary" style="margin-left: 10px;">保留当前关系</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" style="margin-left: 10px;">删除选中关系</el-button>
            </el-form-item>
        </el-row>
    </el-form>
    <!-- 选择导入字段 -->
    <div style="background-color: #F0F2F5;">
        <el-form :model="formData" ref="vForm" :rules="rules" label-position="center" label-width="100px"
            style="margin-top: 30px;">
            <div class="text">请选择导入字段</div>
            <div style="height: 1px; background-color:rgba(187,187,187,1); width: 100%;margin-top: 10px;"></div>
            <el-row>
                <el-col :span="6" :offset="6" style="margin-top: 20px;">
                    <el-form-item label="姓名">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6" style="margin-top: 20px;">
                    <el-form-item label="部门">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="英文名">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="邮箱">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="公司名称">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="传真">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="公司英文">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="地址">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="手机一">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="英文地址">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="手机二">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="备注">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="电话一">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="数据来源">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="电话二">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="人员类别">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="职务">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="身份证号">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="行业类别">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="微信">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="产品">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="qq">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="人员标签一">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="网址">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" :offset="6">
                    <el-form-item label="标签二">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <el-form-item style="margin-top: 30px;">
        <el-button type="primary" style="margin-left: 10px;">开始导入</el-button>
    </el-form-item>
</template>

<script>
import {
    defineComponent,
    toRefs,
    reactive,
    getCurrentInstance
}
    from 'vue'
export default defineComponent({
    components: {},
    props: {},
    setup() {
        const state = reactive({
            formData1: {
                bumen: '',
                dianhua: "",
                phone: "",
                weiixn: "",
                gsiname: "",
                address: "",
                zhjianhao: '',
                ciawuname: "",
            },

        })
        const instance = getCurrentInstance()
        const submitForm = () => {
            instance.proxy.$refs['vForm'].validate(valid => {
                if (!valid) return
                //TODO: 提交表单
            })
        }
        const resetForm = () => {
            instance.proxy.$refs['vForm'].resetFields()
        }
        return {
            ...toRefs(state),
            submitForm,
            resetForm
        }
    }
})

</script>

<style lang="scss" scoped>
.message {
    font-size: 14px;
    font-weight: 600
}

.main {
    display: flex;
    margin: 0 auto;
    width: 700px;
}

main .main-one,
.main-two,
.main-three {
    width: 200px;
    height: 50px;
    text-align: center;
}

.main-one span {
    display: block;
    width: 50px;
    font-size: 18px;
    line-height: 30px;
    margin: 0 auto;
    color: #fff;
    margin-top: -28px;
}

.main-two span {
    display: block;
    width: 50px;
    line-height: 30px;
    margin: 0 auto;
    color: #fff;
    margin-top: -28px;
    font-size: 18px;
}

.main-three span {
    display: block;
    width: 50px;
    line-height: 30px;
    margin: 0 auto;
    color: #fff;
    margin-top: -28px;
    font-size: 18px;
}

.hr1,
.hr2 {
    width: 500px;
    height: 16px;
    border-bottom: 2px solid #898888;
}

p {
    margin-left: 6px;
}

.el-row {
    margin-left: 50px;
}

.text {
    margin-left: 50px;
    font-size: 16px;
    padding-top: 10px;
    color: rgba(51, 51, 51, 1);
    font-family: SourceHanSansSC-bold;
}

.el-col-offset-6 {
    margin-left: 12%;
}
</style>
